<template>
  <!-- 编辑职务 -->
  <el-dialog
    v-model="props.modelValue"
    :append-to-body="true"
    width="1000px"
    class="dialog-class"
    :show-close="false"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4
          :id="titleId"
          :class="titleClass"
        >
          {{ t('organizationStructure.OStructure.d2') }}
        </h4>
        <img
          src="@/assets/img/icon_guanbi.png"
          @click="close"
          class="close"
        />
      </div>
    </template>
    <el-table :data="roleList" style="width: 100%">
      <el-table-column prop="name" label="" />
      <el-table-column prop="remark" label="" />
      <el-table-column fixed="right" label="" width="120">
        <template #default="scope">
          <el-popconfirm
            :title="t('popconfirm_del')"
            @confirm="delRoleFn(scope.row)"
          >
            <template #reference>
              <el-button
                :disabled="scope.row.disDel"
                link
                size="small"
              >
                {{ t('organizationStructure.OStructure.db4') }}
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-wrap">
      <el-pagination class="lx-pagination" :current-page="currentNum" :page-size="curPageSize" layout="prev, pager, next" :total="totalNum" @current-change="onCurrentChange" />
    </div>

    <el-form
      ref="formEl"
      :model="formData"
      :rules="rules"
    >

      <el-row>
        <el-col
          :span="4"
          :offset="2"
        >
          <el-form-item prop="roleName">
            <el-input
              v-model.trim="formData.roleName"
              :placeholder="t('organizationStructure.OStructure.p6')"
              :maxlength="20"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="12"
          class="mr-2 ml-2"
        >
          <el-form-item prop="remark">
            <el-input
              v-model.trim="formData.remark"
              :placeholder="t('organizationStructure.OStructure.p7')"
              :maxlength="100"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-button
            class="wp-100"
            type="primary"
            @click="addRoleFn"
          >
            {{ t('organizationStructure.OStructure.db3') }}
          </el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onBeforeMount, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import useLogin from '@/stores/login'
import { getRoleList, addRole, delRole } from '@/service/organizationStructure'

import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()

const router = useRouter()
const route = useRoute()
const storeLogin = useLogin()

watch(locale, () => {
  init()
})

onBeforeMount(() => {
  init()
})

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue'])

const handleClose = () => {
  emit('update:modelValue', false)
}
const totalNum = ref(0)
const currentNum = ref(1)
const curPageSize = ref(10)
//
const formEl = ref(null)
const formData = ref({})
const rules = ref({
  roleName: [{ required: true, message: t('organizationStructure.OStructure.r6'), trigger: 'blur' }],
  remark: [{ required: true, message: t('organizationStructure.OStructure.r7'), trigger: 'blur' }]
})


// 新增
const addRoleFn = () => {
  if (!formEl) return
  formEl.value.validate((valid, fields) => {
    if (valid) {
      addRole({
        enterpriseId: storeLogin.userInfo.enterpriseId,
        ...formData.value
      }).then(({ msg }) => {
        ElMessage.success(msg)
        getList()
      })
    }
  })
}

// 删除
const delRoleFn = (item) => {
  delRole(item.id).then(({ msg }) => {
    ElMessage.success(msg)
    getList()
  })
}

// 列表
const roleList = ref([])
const getList = () => {
  getRoleList({
    pageNum: currentNum.value,
    pageSize: curPageSize.value,
    enterpriseId: storeLogin.userInfo.enterpriseId
  }).then(({ rows, total }) => {
    rows.forEach((item) => {
      item.disDel = item.roleCode === 'captain',
      item.name = locale.value === 'en' ? item.roleNameEn : item.roleName
    })
    roleList.value = [
      {
        roleName: t('organizationStructure.OStructure.roleName'),
        remark: t('organizationStructure.OStructure.remark'),
        disDel: true
      },
      ...rows
    ]
    totalNum.value = total
  })
}

//
const init = () => {
  getList()
}

const onCurrentChange = (val) => {
  currentNum.value = val
  getList()
}
</script>

<style scoped lang="scss">
.pagination-wrap {
  display: flex;
  justify-content: flex-end;
  margin: 20px 0;
}
</style>